<template>
  <div>
    <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="switchLoad" infinite-scroll-distance="10">
      <template v-for="item in list">
        <item :content="item"></item>
      </template>
    </ul>

    <div class="load-more-wrap" v-if="loadStatus">
      <img src="../assets/svg/load-mord.svg" alt="" v-if="isMore">
      <p v-else>暂无更多数据</p>
    </div>
    <div class="pub-back-top">
      <div v-if="topStatus" class="back-top" @click="gotop">
        <i class="iconfont icon-huidaodingbu"></i>
      </div>
      <div class="back-top">
        <i class="iconfont icon-icon-refresh"></i>
      </div>
    </div>
  </div>
</template>
<script>
  import item from '../components/newsItme'
  import request from '../../api/request'
  import backTop from '../mixins/backToTop'
  export default {
    name: "news",
    mixins: [backTop],
    data () {
      return {
        type: '',
        list: [],
        pageSize: 30,
        page: 1,
        switchLoad: false,
        loadStatus: false,
        isMore: true,
        topStatus: false
      }
    },
    components: {
      item
    },
    watch: {
      $route () {
        this.type = this.$route.name
        this.list = []
        this.page = 0
        this.switchLoad = false
        this.loadStatus = false
        this.isMore = true
        this.loadMore()
      }
    },
    created () {
      this.type = this.$route.name
    },
    methods: {
      loadMore () {
        this.loadStatus = true
        this.page++
        if (this.type === 'information') {
          request.get('flashMsg', {page: this.page, pageSize: this.pageSize, category_id: 1}).then((response) => {
            if(response.data.code === '200') {
              this.loadStatus = false
              if (response.data.data.items.length) {
                this.list = this.list.concat(response.data.data.items)
              } else {
                this.isMore = false
                this.switchLoad = true
              }
            }
          })
        } else if (this.type === 'hot') {
          request.get('hotTopics', {page: this.page, pageSize: this.pageSize, category_id: 1}).then((response) => {
            if(response.data.code === '200') {
              this.loadStatus = false
              if (response.data.data.items.length) {
                this.list = this.list.concat(response.data.data.items)
              } else {
                this.isMore = false
                this.switchLoad = true
              }
            }
          })
        } else if (this.type === 'subscribe') {
          request.get('myTopic', {page: this.page, pageSize: this.pageSize, category_id: 1}).then((response) => {
            if(response.data.code === '200') {
              this.loadStatus = false
              if (response.data.data.items.length) {
                this.list = this.list.concat(response.data.data.items)
              } else {
                this.isMore = false
                this.switchLoad = true
              }
            }
          })
        } else {
          request.get('subscribe', {page: this.page, pageSize: this.pageSize, category_id: 1}).then((response) => {
            if(response.data.code === '200') {
              this.loadStatus = false
              if (response.data.data.items.length) {
                this.list = this.list.concat(response.data.data.items)
              } else {
                this.isMore = false
                this.switchLoad = true
              }
            }
          })
        }
      },
      gotop () {
        this.backToTop()
      }
    },
    mounted () {
      window.addEventListener('scroll', () => {
        window.scrollY > 300 ? (this.topStatus = true) : (this.topStatus = false)
      })
    }
  }
</script>

<style lang="scss">

</style>
